<template>
  <div class="app-container">
    <el-tabs v-model="activeName" class="tabs">
      <el-tab-pane label="合同信息" name="first">
        <el-descriptions class="margin-top" :column="4" border>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">合同名称</template>
            <span>{{ form.contractName }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">合同金额</template>
            <span>{{ form.contractAmount }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">变更后合同金额</template>
            <span>{{ form.chgContractAmount }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">开工预付款比例(%)</template>
            <span>{{ form.kgyfkbl }}</span>
          </el-descriptions-item>
          <!-- <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">建设场景1</template>
            <span>{{ form.scene1 }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">容量1</template>
            <span>{{ form.rongliang1 }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">单价1</template>
            <span>{{ form.danjia1 }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">建设场景2</template>
            <span>{{ form.scene2 }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">容量2</template>
            <span>{{ form.rongliang2 }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">单价2</template>
            <span>{{ form.danjia2 }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">建设场景3</template>
            <span>{{ form.scene3 }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">容量3</template>
            <span>{{ form.rongliang3 }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">单价3</template>
            <span>{{ form.danjia3 }}</span>
          </el-descriptions-item> -->
        </el-descriptions>
        <el-descriptions class="descriptions-conter" :column="4" border labelClassName="descriptions-label"
          v-for="(item, index) in form.sceneList">
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">建设场景{{ index + 1 }}</template>
            <span>{{ item.sceneName }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">容量{{ index + 1 }}</template>
            <span>{{ item.capacity }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">变更容量{{ index + 1 }}</template>
            <span>{{ item.chgCapacity }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label">单价{{ index + 1 }}</template>
            <span>{{ item.price }}</span>
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="descriptions-conter" :column="4" border labelClassName="descriptions-label">
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label"> 开始时间</template>
            <span>{{ parseTime(form.beginDate, '{y}-{m}-{d}') }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label"> 结束时间</template>
            <span>{{ parseTime(form.endDate, '{y}-{m}-{d}') }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label"> 签订时间</template>
            <span>{{ parseTime(form.signDate, '{y}-{m}-{d}') }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label"> 甲方单位名称</template>
            <span>{{ form.partAName }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <span>{{ form.partBName }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label"> 扣除奖励基金比例(‰)</template>
            <span>{{ form.kcjljjbl }}</span>
          </el-descriptions-item>
          <el-descriptions-item labelStyle="width: 110px" contentStyle="width: 200px">
            <template slot="label"> 合同备注</template>
            <span>{{ form.remark }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="合同信息里程碑" name="second" :disabled="!form.contractId">
        <bsContractInfoMilestone disabled :showButton="false" :contractId="form.contractId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listBsContractInfo, getBsContractInfo, delBsContractInfo, addBsContractInfo, updateBsContractInfo } from "@/api/cm/bsContractInfo";
import { queryBdSelect } from "@/api/base/bsBd";
import { mapGetters } from "vuex";
import bsContractInfoMilestone from "@/views/base/bsContractInfoMilestone/index.vue";
import decimal from "@/utils/big-decimal";

export default {
  name: "BsContractInfo",
  dicts: ['report_status'],
  components: {
    bsContractInfoMilestone,
  },
  props: {
    bdId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      activeName: "first",
      lookView: false,
      treeList: [],
      treeInfo: {},
      defaultProps: {
        children: "children",
        label: "name"
      },
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 合同管理表格数据
      bsContractInfoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        projectId: undefined,
        bdId: undefined,
      },
      reportStatus: '00',
      form: {}
    };
  },


  created () {
  },
  watch: {
    bdId: {
      deep: true,
      immediate: true,
      handler (val) {
        this.queryParams.bdId = val;
        this.getList();
      }
    }
  },
  methods: {
    handleNodeClick (data) {
      this.treeInfo = data;
      this.queryParams.bdId = data.id; //标段ID
      this.handleQuery();
      this.activeName = 'first';
    },
    /** 查询合同管理列表 */
    async getList () {
      try {
        this.loading = true;
        const response = await listBsContractInfo(this.queryParams);
        this.bsContractInfoList = response.rows;
        if (this.queryParams.bdId && response.rows && response.rows.length > 0) {
          this.form = response.rows[0] || {};
          this.reportStatus = this.form.approvalStatus || '00';
        } else {
          this.reset();
          this.reportStatus = "00";
        }
        // this.form = response.rows[0] || {};

        this.total = response.total;
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }

    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd () {
      if (this.treeInfo.type == "bd") {
        this.reset();
        this.open = true;
        this.title = "添加合同管理";
      } else {
        this.$modal.msgError(`请先在左侧选择合同所属标段！`);
        return;
      }
    },
    countHtje () {
      let a = this.form.capacity; //数量
      let b = this.form.price; //单价
      this.form.contractAmount = decimal.multiply(a, b);
    },
    // 状态字典翻译
    reportStatusFormat () {
      return this.selectDictLabel(this.dict.type.report_status, this.reportStatus);
    },
    // 是否可操作
    canOperation () {
      return this.reportStatus == '00' || this.reportStatus == '33';
    },
  }
};
</script>
<style lang="scss" scoped>
.boxCenter {
  margin-top: 20px;
  text-align: center;
}

.tabs {
  // margin-top: 38px;

  ::v-deep {
    .el-tabs__nav-wrap {
      width: 100%
    }

    .el-tabs__item {
      height: 40px !important;
      line-height: 40px !important;
    }
  }
}

.descriptions-conter {
  ::v-deep {
    .el-descriptions-item__cell {
      border-top: 0px solid #eee;
    }
  }
}
</style>
